import React from 'react';

class Form extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg: "react表单",
            name: '',
            sex: '',
            city: '',
            citys: ['北京', '上海', '深圳'],
            hobby:[   
                {  
                    'title':"睡觉",
                    'checked':true
                },
                {  
                    'title':"吃饭",
                    'checked':false
                },
                {  
                    'title':"敲代码",
                    'checked':true
                }
            ],
            info:''
         }
        //  this.handleHobby = this.handleHobby.bind(this)
    }

    handleSubmit = (e) => {
        console.log("submit")
        e.preventDefault()
        console.log('name',this.state.name, '\n', 'sex', this.state.sex, '\n', "city", this.state.city)
        console.log('hobby', this.state.hobby)
    }

    handleName = (e) => {
        this.setState({
            name: e.target.value
        })
        console.log("name")
    }

    handleSex = (e) => {
        this.setState({
            sex: e.target.value
        })
        console.log('sex' + e.target.value)
    }

    handleCity = (e) => {
        this.setState({
            city: e.target.value
        })
    }

    handleHobby(key, e) {
        var hobby=this.state.hobby;

        hobby[key].checked=!hobby[key].checked;

        this.setState({

            hobby:hobby
        })                                                                                                  

    }

    render() { 
        return ( 
            <div>
                <h2>{this.state.msg}</h2>

                <form onSubmit={this.handleSubmit}>
                   姓名： <input type='text' value={this.state.name} onChange={this.handleName}></input><br/>
                    性别： <input type='radio' value='0' checked={this.state.sex==0} onChange={this.handleSex}/>男
                            <input type='radio' value='1' checked={this.state.sex==1} onChange={this.handleSex}/>女
                    <br/>
                    城市： 
                        <select value={this.state.city} onChange={this.handleCity}>
                            {
                                this.state.citys.map(function(value, key){
                                    return <option key = {key}>{value}</option>
                                })
                            }
                        </select>

                    爱好：
                    {
                        this.state.hobby.map((value, key) => {
                            return (
                                <span key={key}>
                                    <input type='checkbox' checked={value.checked} onChange={this.handleHobby.bind(this, key)}></input> {value.title}
                                </span>
                            )
                        })
                    }
                <hr/>
                    <input type="submit"  defaultValue="提交"/>
                </form>
                
            </div>
         );
    }
}
 
export default Form;